<template>
    <div class="question-wrap" v-loading="loading">
        <el-form :model="paramsList" :rules="rules" :validate-on-rule-change="false" ref="question" :inline="false" label-width="100px" class="question-box">
            <el-form-item label="所属范围" prop="typeId" required>
                <el-select style="width:300px;" v-model="paramsList.typeId">
                    <el-option v-for="(item, index) in protocolList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题目" prop="title" required>
                <el-input style="width:300px;" clearable v-model.trim="paramsList.title"></el-input>
            </el-form-item>
            <el-form-item label="正确答案" prop="rightAnswer" required>
                <el-input style="width:300px;" clearable v-model.trim="paramsList.rightAnswer"></el-input>
            </el-form-item>
            <el-form-item label="错误答案1" prop="answerOne" required>
                <el-input style="width:300px;" clearable v-model.trim="paramsList.answerOne"></el-input>
            </el-form-item>
            <el-form-item label="错误答案2" prop="answerTwo">
                <el-input style="width:300px;" clearable v-model.trim="paramsList.answerTwo"></el-input>
            </el-form-item>
            <el-form-item label="错误答案3" prop="answerThree">
                <el-input style="width:300px;" clearable v-model.trim="paramsList.answerThree"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="toast">
                <el-input style="width:300px;" clearable v-model.trim="paramsList.toast"></el-input>
            </el-form-item>
            <el-form-item label="题目状态" prop="status" required>
                <el-radio-group v-model="paramsList.status">
                    <el-radio :label="1">上架</el-radio>
                    <el-radio :label="-1">下架</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="btn-wrap">
            <el-button type="primary" @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        dialogVisible: false,
        questionId: {
            type: Number,
            default: null
        },
        protocolList: {
            type: Array,
            default: []
        },
        dialogClose: {
            type: Function,
            default: null
        }
    },
    data () {
        return {
            paramsList: {
                typeId: null,
                title: null,
                rightAnswer: '',
                answerOne: '',
                answerTwo: '',
                answerThree: '',
                status: null
            },
            loading: false,
            rules: {
                typeId: [
                    { required: true, message: '请选择所属范围', trigger: 'change' }
                ],
                title: [
                    { required: true, message: '请填写题目', trigger: ['blur', 'change'] }
                ],
                rightAnswer: [
                    { required: true, message: '请填写正确答案', trigger: ['blur', 'change'] }
                ],
                answerOne: [
                    { required: true, message: '请填写错误答案1', trigger: ['blur', 'change'] }
                ],
                status: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ]
            }
        }
    },
    mounted () {
        if (this.questionId) this.getQuestion()
    },
    watch: {
        dialogVisible (val) {
            if (val && !this.questionId) {
                this.paramsList = {
                    typeId: null,
                    title: null,
                    rightAnswer: '',
                    answerOne: '',
                    answerTwo: '',
                    answerThree: '',
                    status: null
                }
            }
            if (val && this.questionId) {
                this.getQuestion()
            }
        }
    },
    methods: {
        // 获取列表
        async getQuestion () {
            let params = {
                questionId: this.questionId,
                pageNum: 1,
                pageSize: 10
            }
            let res = await this.$http.get('/exam/getQuestionList', { params })
            if (res.code === '0') {
                this.paramsList = res.data[0]
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        selectionChange (val) {
            this.chooseList = val
            this.gameList = []
            val.map(item => {
                this.gameList.push({
                    gameid: item.gameid,
                    appName: item.appName
                })
            })
        },
        selectChange () {
            this.type = ''
            this.sort = ''
            this.$refs.table.clearSort()
            this.getGame(1)
        },
        submit () {
            this.$refs['question'].validate(valid => {
                if (valid) {
                    this.$http.post('/exam/updateQuestionInfo', this.paramsList).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                type: 'success',
                                message: '保存成功'
                            })
                            this.dialogClose('submit')
                        } else {
                            this.$message({
                                type: 'error',
                                message: '系统异常，请稍后再试'
                            })
                        }
                    })
                }
            })
        },
        cancel () {
            this.dialogClose('cancel')
        }
    }
}
</script>

<style lang="scss" scoped>
    .question-wrap {
        .question-box {
            margin-top: 10px;
            padding-right: 20px;
        }
        .btn-wrap {
            display: flex;
            margin-top: 20px;
            justify-content: space-around;
        }
    }
</style>
